<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>JQVMap - World Map</title>

        <link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>

        <script src="../jqvmap/maps/continents/jquery.vmap.asia.js" type="text/javascript"></script>
        <script src="../jqvmap/maps/continents/jquery.vmap.europe.js" type="text/javascript"></script>
        <script src="../jqvmap/maps/continents/jquery.vmap.australia.js" type="text/javascript"></script>
        <script src="../jqvmap/maps/continents/jquery.vmap.africa.js" type="text/javascript"></script>
        <script src="../jqvmap/maps/continents/jquery.vmap.north-america.js" type="text/javascript"></script>
        <script src="../jqvmap/maps/continents/jquery.vmap.south-america.js" type="text/javascript"></script>

        <script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>

        <script type="text/javascript">
            jQuery(document).ready(function() {
                $('h2').each(function(){
                    console.log(this.id);
                    $(this).click(function(){
                        console.log(this.id);
                        $('.tab-selected').removeClass('tab-selected');
                        $(this).addClass('tab-selected');
                        $('.map').css('z-index', '0');
                        $('#vmap-'+this.id).parent().css('z-index', '1');
                    });
                });
                $('h2:first').addClass('tab-selected');
                $('.map:first').css('z-index', '1');
                
                jQuery('#vmap-asia').vectorMap({
                    map: 'asia_en',
                    backgroundColor: '#333333',
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true,
                    showTooltip: true,
                    values: sample_data,
                    scaleColors: ['#C8EEFF', '#006491'],
                    normalizeFunction: 'polynomial'
                });
                jQuery('#vmap-europe').vectorMap({
                    map: 'europe_en',
                    backgroundColor: '#333333',
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true,
                    showTooltip: true,
                    values: sample_data,
                    scaleColors: ['#C8EEFF', '#006491'],
                    normalizeFunction: 'polynomial'
                });
                jQuery('#vmap-australia').vectorMap({
                    map: 'australia_en',
                    backgroundColor: '#333333',
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true,
                    showTooltip: true,
                    values: sample_data,
                    scaleColors: ['#C8EEFF', '#006491'],
                    normalizeFunction: 'polynomial'
                });
                jQuery('#vmap-africa').vectorMap({
                    map: 'africa_en',
                    backgroundColor: '#333333',
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true,
                    showTooltip: true,
                    values: sample_data,
                    scaleColors: ['#C8EEFF', '#006491'],
                    normalizeFunction: 'polynomial'
                });
                jQuery('#vmap-northamerica').vectorMap({
                    map: 'north-america_en',
                    backgroundColor: '#333333',
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true,
                    showTooltip: true,
                    values: sample_data,
                    scaleColors: ['#C8EEFF', '#006491'],
                    normalizeFunction: 'polynomial'
                });
                jQuery('#vmap-southamerica').vectorMap({
                    map: 'south-america_en',
                    backgroundColor: '#333333',
                    color: '#ffffff',
                    hoverOpacity: 0.7,
                    selectedColor: '#666666',
                    enableZoom: true,
                    showTooltip: true,
                    values: sample_data,
                    scaleColors: ['#C8EEFF', '#006491'],
                    normalizeFunction: 'polynomial'
                });
            });
        </script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            h2 {
                background: none repeat scroll 0 0 #cccccc;
                border: 1px solid #aaaaaa;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                float: left;
                padding: 5px;
                font-size: 20px;
                font-weight: normal;
                cursor: pointer;
            }
            h2.tab-selected {
                background: #888888;
                border: 1px solid #000000;
            }
            .map {
                position: absolute;
                z-index: 0;
                left: 0;
                top: 35px;
            }
        </style>
    </head>
    <body>
        <h2 id="asia">Asia</h2>
        <div class="map">
            <div id="vmap-asia" style="width: 600px; height: 400px;"></div>
        </div>
        <h2 id="europe">Europe</h2>
        <div class="map">
            <div id="vmap-europe" style="width: 600px; height: 400px;"></div>
        </div>
        <h2 id="australia">Australia</h2>
        <div class="map">
            <div id="vmap-australia" style="width: 600px; height: 400px;"></div>
        </div>
        <h2 id="africa">Africa</h2>
        <div class="map">
            <div id="vmap-africa" style="width: 600px; height: 400px;"></div>
        </div>
        <h2 id="northamerica">North America</h2>
        <div class="map">
            <div id="vmap-northamerica" style="width: 600px; height: 400px;"></div>
        </div>
        <h2 id="southamerica">South America</h2>
        <div class="map">
            <div id="vmap-southamerica" style="width: 600px; height: 400px;"></div>
        </div>
    </body>
</html>
